<template>
	<view class="wallet-recharge">
		<!-- 账户卡片 -->
		<view class="recharge-card">
			<view class="card-info">
				<view class="card-title">充值账户</view>
				<view class="card-phone">{{ user_info.phone }}</view>
				<view class="card-balance">￥{{ user_info.money }}</view>
				<view class="card-record-entry" @click="goRecord">
					<u-icon name="list" size="36" color="#fff" />
					<text class="record-text">交易明细</text>
				</view>
			</view>
			<!-- <view class="card-desc">
				<text>充值让乐趣加倍</text>
				<text class="card-link" @click="goHelp">去帮好友充 ></text>
			</view> -->
		</view>

		<!-- 充值选项 -->
		<view class="recharge-options">
			<view v-for="(item, idx) in recharge_list" :key="item.value" class="option-item"
				:class="{ active: idx === selected }" @click="selected = idx">
				<view class="option-tags">
					<text v-if="item.tag" class="tag" :class="item.tagType">{{ item.tag }}</text>
					<text v-if="item.percent" class="percent">{{ item.percent }}</text>
				</view>
				<view class="option-amount">到手￥{{ item.received_amount }}</view>
				<view class="option-pay">充值￥{{ item.recharge_amount }}</view>
			</view>
			<!-- <view class="option-item help-item" @click="goHelp">
				<view class="option-amount">去找人</view>
				<view class="option-pay">帮我充值 <text class="help-emoji">🧧</text></view>
			</view> -->
		</view>

		<!-- 协议勾选 -->
		<view class="recharge-agree">
			<u-checkbox v-model="agree" shape="circle" activeColor="#2468f2" size="32"></u-checkbox>
			<text>请仔细阅读并同意</text>
			<text class="link" @click="showPopup('rules')">《充值规则》</text>
			<text>和</text>
			<text class="link" @click="showPopup('agreement')">《充值协议》</text>
		</view>

		<!-- 充值说明 -->
		<view class="recharge-desc">
			<view class="desc-title">充值说明 <text class="link" @click="showPopup('instructions')">[查看详情]</text></view>
			<view class="desc-list">
				<u-parse :html="recharge.recharge_instructions || ''" />
			</view>
		</view>

		<!-- 底部按钮 -->
		<view class="recharge-btn" :class="{ disabled: !agree }" @click="pay">
			确认使用微信支付 ￥{{ recharge_list[selected] ? recharge_list[selected].recharge_amount : 0 }}
		</view>

		<!-- 协议/说明弹窗 -->
		<u-popup v-model="popupVisible" mode="center" :mask-close-able="true" border-radius="20">
			<view style="width: 600rpx; max-height: 70vh; background: #fff; border-radius: 20rpx; overflow: auto; padding: 32rpx 24rpx;">
				<view style="font-size: 32rpx; font-weight: bold; text-align: center; margin-bottom: 24rpx;">
					{{ popupTitle }}
				</view>
				<u-parse :html="popupHtml" />
				<view style="text-align: center; margin-top: 32rpx;">
					<u-button type="primary" size="medium" @click="popupVisible = false">关闭</u-button>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
import request from '@/common/request.js';
import { mapMutations } from 'vuex';
export default {
	components: {
		'u-icon': () => import('@/uview-ui/components/u-icon/u-icon.vue'),
	},
	data() {
		return {
			user_info: {},
			recharge_list: [],
			selected: 0,
			agree: true,
			recharge: {},
			popupVisible: false,
			popupHtml: '',
			popupTitle: ''
		}
	},
	onShow: function () {
		this.getRechargeInfo();
	},
	methods: {
		...mapMutations(['SET_USER_INFO']),
		async getRechargeInfo() {
			const res = await request.httpTokenRequest({ url: '/api/index/getRechargeInfo', method: 'get' });
			console.log(res, '充值信息');

			if (res.data && res.data.code == 1) {
				this.recharge_list = res.data.data.recharge_list;
				this.user_info = res.data.data.user_info;
				this.recharge = res.data.data.recharge || {};
			}
		},
		showPopup(type) {
			if (type === 'rules') {
				this.popupTitle = '充值规则';
				this.popupHtml = this.recharge.recharge_rules || '<p>暂无内容</p>';
			} else if (type === 'agreement') {
				this.popupTitle = '充值协议';
				this.popupHtml = this.recharge.recharge_greement || '<p>暂无内容</p>';
			} else if (type === 'instructions') {
				this.popupTitle = '充值说明';
				this.popupHtml = this.recharge.recharge_instructions || '<p>暂无内容</p>';
			}
			this.popupVisible = true;
		},
		goHelp() {
			uni.showToast({
				title: '去帮好友充值',
				icon: 'none'
			})
		},
		goRecord() {
			uni.navigateTo({ url: '/pages/wallet/record' });
		},
		async pay() {
			if (!this.agree) {
				uni.showToast({
					title: '请先同意协议',
					icon: 'none'
				})
				return
			}
			const item = this.recharge_list[this.selected];
			if (!item) {
				uni.showToast({ title: '请选择充值金额', icon: 'none' });
				return;
			}
			try {
				uni.showLoading({ title: '发起支付...' });
				// 1. 调用后端下单接口，获取支付参数
				const res = await request.httpTokenRequest({
					url: '/api/index/payRecharge',
					method: 'post',
					data: { recharge_id: item.id, pay_type: 'wechat' }
				});
				if (res.data && res.data.code == 1 && res.data.data) {
					const payData = res.data.data;
					uni.requestPayment({
						provider: 'wxpay',
						...payData,
						success: async () => {
							uni.hideLoading();
							uni.showToast({ title: '支付成功', icon: 'success' });
							// 2. 支付成功后刷新余额到全局userInfo
							await this.refreshUserInfo();
							// setTimeout(() => {
							// 	uni.redirectTo({ url: '/pages/wallet/record' });
							// }, 1200);
						},
						fail: (err) => {
							uni.hideLoading();
							uni.showToast({ title: '支付失败', icon: 'none' });
							console.error('支付失败', err);
						}
					});
				} else {
					uni.hideLoading();
					uni.showToast({ title: res.data.msg || '下单失败', icon: 'none' });
				}
			} catch (e) {
				uni.hideLoading();
				uni.showToast({ title: '支付异常', icon: 'none' });
				console.error('支付异常', e);
			}
		},
		async refreshUserInfo() {
			// 获取最新用户信息并更新到全局store和本地缓存
			try {
				const res = await request.httpTokenRequest({ url: '/api/user/getPersonalCenter', method: 'get' });
				if (res.data && res.data.code == 1 && res.data.data && res.data.data.user_info) {
					this.SET_USER_INFO(res.data.data.user_info);
					uni.setStorageSync('user_info', res.data.data.user_info);
				}
			} catch (e) {
				console.error('刷新用户信息失败', e);
			}
		}
	}
}
</script>

<style lang="scss">
.wallet-recharge {
	min-height: 100vh;
	background: #f8f8f8;

	.recharge-card {
		background: linear-gradient(90deg, #3a6ff7 0%, #5a9cf8 100%);
		border-radius: 20rpx;
		margin: 24rpx 24rpx 0 24rpx;
		padding: 32rpx 24rpx 16rpx 24rpx;
		color: #fff;
		position: relative;

		.card-info {
			position: relative;
			.card-title {
				font-size: 28rpx;
			}

			.card-phone {
				font-size: 32rpx;
				margin: 8rpx 0;
			}

			.card-balance {
				font-size: 44rpx;
				font-weight: bold;
			}

			.card-record-entry {
				position: absolute;
				top: 0;
				right: 0;
				display: flex;
				align-items: center;
				padding: 12rpx 20rpx;
				z-index: 2;
				.record-text {
					color: #fff;
					font-size: 26rpx;
					margin-left: 8rpx;
				}
			}
		}

		.card-desc {
			display: flex;
			justify-content: space-between;
			align-items: center;
			font-size: 26rpx;
			margin-top: 12rpx;

			.card-link {
				color: #fff;
				opacity: 0.8;
			}
		}
	}

	.recharge-options {
		display: flex;
		flex-wrap: wrap;
		margin: 24rpx;

		.option-item {
			width: 46%;
			margin: 2%;
			background: #fff;
			border-radius: 16rpx;
			box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.04);
			padding: 24rpx 0;
			text-align: center;
			position: relative;
			border: 2rpx solid transparent;

			.option-tags {
				position: absolute;
				left: 16rpx;
				top: 12rpx;

				.tag {
					font-size: 22rpx;
					padding: 2rpx 12rpx;
					border-radius: 16rpx;
					color: #fff;

					&.blue {
						background: #2468f2;
					}

					&.red {
						background: #ff4d4f;
					}
				}

				.percent {
					font-size: 20rpx;
					color: #ff4d4f;
					margin-left: 8rpx;
				}
			}

			.option-amount {
				font-size: 36rpx;
				font-weight: bold;
				margin-top: 12rpx;
				color: #2468f2;
			}

			.option-pay {
				font-size: 28rpx;
				color: #888;
				margin-top: 8rpx;
			}

			&.active {
				border-color: #2468f2;
				box-shadow: 0 4rpx 16rpx rgba(36, 104, 242, 0.08);
				background: #f5faff;
			}
		}

		.help-item {
			background: #fffbe6;
			color: #ff4d4f;

			.option-amount {
				color: #ff4d4f;
			}

			.option-pay {
				color: #ff4d4f;
			}

			.help-emoji {
				margin-left: 6rpx;
			}
		}
	}

	.recharge-agree {
		display: flex;
		align-items: center;
		font-size: 26rpx;
		margin: 0 24rpx 0 24rpx;

		.link {
			color: #2468f2;
			margin: 0 4rpx;
		}
	}

	.recharge-desc {
		margin: 32rpx 24rpx 0 24rpx;
		background: #fff;
		border-radius: 16rpx;
		padding: 24rpx;

		.desc-title {
			font-size: 30rpx;
			font-weight: bold;
			margin-bottom: 12rpx;
			text-align: center;
		}

		.desc-list {
			font-size: 26rpx;
			color: #666;

			.red {
				color: #ff4d4f;
			}

			view {
				margin-bottom: 8rpx;
			}
		}
	}

	.recharge-btn {
		margin: 40rpx 24rpx 0 24rpx;
		height: 90rpx;
		line-height: 90rpx;
		background: #2468f2;
		color: #fff;
		font-size: 32rpx;
		border-radius: 16rpx;
		text-align: center;
		font-weight: bold;

		&.disabled {
			background: #b0b0b0;
			color: #fff;
		}
	}
}
</style>